<template>
    <div class="product_detail">
        <div class="product_detail_scroll" @scroll="checkScrollPosition">
            <!-- 顶部 -->
            <div class="header">

                <van-nav-bar title="商品详情" left-arrow @click-left="handleLeft">
                    <template #right>
                        <van-image :src="setUp" class="menu_cion" @click="rightPop = !rightPop" />
                    </template>
                </van-nav-bar>
            </div>
            <div class="right_pop" v-if="rightPop">
                <div class="right_pop_div" @click="onClickRight">
                    <van-image :src="edit" class="menu_cions" />
                    <div>编辑</div>
                </div>
                <div class="right_pop_div" @click="onClickComplement('补码')">
                    <van-image :src="complement" class="menu_cions" />
                    <div>补码</div>
                </div>
                <div class="right_pop_div" @click="onClickComplement('69码')" v-if='detailInfo.styleCode'>
                    <van-image :src="complement69" class="menu_cions" />
                    <div>69码</div>
                </div>
                <div class="right_pop_div" @click="onClickComplement('打印')">
                    <van-image :src="icon_dayin" class="menu_cions" />
                    <div>打印</div>
                </div>
            </div>


            <!-- 浮动导航栏 -->
            <div class="floating-nav" v-if="showFloatingNav">
                <ul>
                    <li @click="scrollToElement('product_detail_top')"
                        :class="{ 'red-text': activeNavItem == 'product_detail_top' }">
                        商品
                    </li>

                    <li @click="scrollToElement('product_detail_title--productPhotograph')"
                        :class="{ 'red-text': activeNavItem == 'product_detail_title--productPhotograph' }">
                        商品资质
                    </li>
                    <li @click="scrollToElement('product_detail_title--cooperate')"
                        :class="{ 'red-text': activeNavItem == 'product_detail_title--cooperate' }">
                        合作信息
                    </li>
                    <li @click="scrollToElement('product_detail_title--supplier')"
                        :class="{ 'red-text': activeNavItem == 'product_detail_title--supplier' }">
                        供应商信息
                    </li>
                </ul>
            </div>
            <!-- 商品详情 -->
            <div class="product_detail_top" id="product_detail_top">
                <!-- 轮播 -->
                <div class="product_detail_top_img">
                    <van-swipe lazy-render ref="ticketSwiper" v-if="realSrcList.length">
                        <van-swipe-item v-for="(image, index) in realSrcList" :key="image">
                            <van-image class="product_detail_top-image"
                                :src="image + '?x-oss-process=image/resize,w_300'"
                                @click="enlargeImage(realSrcList, index)" fit="cover" />
                        </van-swipe-item>
                        <template #indicator="{ active, total }">
                            <div class="hmshop-custom-indicator fl-box-center">{{ active + 1 }}/{{ total }}</div>
                        </template>
                    </van-swipe>
                    <van-image :src="errImg" v-if="!realSrcList.length"> </van-image>

                    <!-- 轮播多机制 -->
                    <div v-if="hmMechanismsList1.cooperationMode" class="mechanism_mall">
                    </div>

                    <!-- 库存 -->
                    <div class="stock_box">
                        <div>库存</div>
                        <div class="line" />
                        <div>{{ Number(detailInfo.stockInfo?.stockAvailable) || 0 }}件/{{
                            Number(detailInfo.stockInfo?.stockTotal) ||
                            0 }}件</div>
                    </div>
                </div>
                <div class="product_detail_top_details">

                    <div class="product_stylename">
                        <div class="product_mechanism" v-if="hmMechanismsList1?.cooperationMode">多机制</div>
                        <div class="styleName text-el">{{ detailInfo.styleName }}</div>
                    </div>

                    <!-- 库存编码69 -->
                    <div class="product_box " v-if="detailInfo.stockCode || detailInfo.styleCode">
                        <div class="product_fl_box">
                            <div class="box_l" v-if="detailInfo.stockCode">

                                <div class="l_title"><span>库存编码</span></div>
                                <div class="l_code text-el ">{{ detailInfo.stockCode }}</div>
                                <div class="l_copy" @click="copyClick(detailInfo.stockCode)"></div>
                            </div>
                            <div class="box_r" v-if="detailInfo.styleCode">
                                {{ detailInfo.styleCode }}
                                <div class="icon_69"></div>
                            </div>

                        </div>
                    </div>


                    <!-- 类目、品牌     -->
                    <div class="product_ppbox">
                        <div class="pp_item" v-if="detailInfo.productCategoryName"
                            v-for="item in detailInfo.productCategoryName.split(',')" :key="item">{{ item }}</div>
                        <div class="pp_item" v-if="detailInfo.brandName" v-for="item in detailInfo.brandName.split(',')"
                            :key="item">{{ item }}</div>
                    </div>

                    <!-- 供应商 -->
                    <div class="product_gysbox">
                        <div class="gys_l">
                            <div class="gys_img"></div> <span> 供应商：{{ detailInfo.supplierName }}</span>
                        </div>

                        <div class="gys_c"
                            :class="{ style_y: detailInfo.supplierVo?.sellStatus == '已签署', style_n: detailInfo.supplierVo?.sellStatus == '未签署' }">
                            {{ detailInfo.supplierVo?.sellStatus }}</div>
                        <!-- <div class="gys_c">有AB货</div> -->
                    </div>

                    <!-- 商品状态、库存状态、货架号 -->
                    <div class="product_ztbox">
                        <!-- <div class="product_users_item">
                            <div class="product_users_title">商品状态</div>
                            <div class="product_users_text">{{ detailInfo.recruiter }}</div>

                        </div> -->
                        <div class="line"></div>
                        <div class="product_users_item">
                            <div class="product_users_title">库存状态</div>
                            <div class="product_users_text">{{ shelvesStatusNameByIdss(detailInfo.shelvesStatus) }}
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="product_users_item">
                            <div class="product_users_title">货架号</div>
                            <div class="product_users_text">{{ detailInfo.stockInfo?.locationName || '--' }} </div>
                        </div>
                    </div>

                    <!-- 商品编码 -->
                    <div class="product_id  ">
                        <div class="produc_left  ">
                            <span>商品编码</span>
                            <span>{{ detailInfo.id }}</span>
                            <span class="copy" @click="copyClick(detailInfo.id)"></span>
                        </div>
                        <div class="coreName " v-if="detailInfo.coreName">
                            <!-- <div class="goods_r_l">{{ detailInfo.liveType }}</div> -->
                            <div class="goods_r_r">{{ detailInfo.coreName }}</div>
                        </div>
                    </div>

                    <!-- 规格、材质 -->
                    <div class="product_ggbox">
                        <div class="ggimg"> </div>
                        <div>规格/材质：{{ detailInfo.specs }}</div>
                    </div>
                    <div class="product_ggbox">
                        <div class="qunimg"> </div>
                        <div>对接群名：{{ detailInfo.groupName }}</div>
                    </div>

                    <span class="tilte" v-if="detailInfo.tradeMode == '进口'">进口货物/原材料报关单</span>
                    <div class="product_image" v-if="detailInfo.tradeMode == '进口'">
                        <IsImgPdf v-for="(item, index) in customsDeclarationImageList" :key="index"
                            v-if="customsDeclarationImageList.length" :url="item" />
                        <div v-if="!customsDeclarationImageList.length">
                            <IsImgPdf url="" />
                        </div>
                    </div>
                    <span class="tilte" v-if="detailInfo.tradeMode == '进口'">进口产品备案材料</span>
                    <div class="product_image" v-if="detailInfo.tradeMode == '进口'">
                        <IsImgPdf v-for="(item, index) in customsInformationImageList" :key="index"
                            v-if="customsInformationImageList.length" :url="item" />
                        <div v-if="!customsInformationImageList.length">
                            <IsImgPdf url="" />
                        </div>
                    </div>
                    <span class="tilte" v-if="detailInfo.tradeMode == '进口'">进口产品原材料检验检疫证明</span>
                    <div class="product_image" v-if="detailInfo.tradeMode == '进口'">
                        <IsImgPdf v-for="(item, index) in customsInspectionImageList" :key="index"
                            v-if="customsInspectionImageList.length" :url="item" />
                        <div v-if="!customsInspectionImageList.length">
                            <IsImgPdf url="" />
                        </div>
                    </div>
                    <span class="tilte" v-if="detailInfo.tradeMode == '进口'">检测报告</span>
                    <div class="product_image" v-if="detailInfo.tradeMode == '进口'">
                        <IsImgPdf v-for="(item, index) in customsTestReportImgaeList" :key="index"
                            v-if="customsTestReportImgaeList.length" :url="item" />
                        <div v-if="!customsTestReportImgaeList.length">
                            <IsImgPdf url="" />
                        </div>
                    </div>
                </div>
            </div>

            <!-- 机制 -->
            <div class="mechanism_area" id="product_detail_jizhi">

                <mechanismCardNew :data="detailInfo.mechanismList"></mechanismCardNew>
            </div>

            <!-- 商品资质 -->
            <div class="mechanism_area" id="product_detail_title--productPhotograph">
                <messageBox title="商品资质">
                    <div class="pop_xhibit">
                        <div class="pop_xhibit_item img_box">
                            <div class="pop_label">商品实拍：</div>
                            <div class="pop_values ">
                                <div class="mul_imags" v-if="stockImageList.length">
                                    <div v-for="(item, index) in stockImageList" :key="index"
                                        @click="enlargeImage(stockImageList, index)">
                                        <IsImgPdf :url="item" />
                                    </div>
                                </div>
                                <div class="mul_imags" v-else>无</div>
                            </div>
                        </div>
                        <div class="pop_xhibit_item img_box">
                            <div class="pop_label">备案行政/许可证批件：</div>
                            <div class="pop_values ">
                                <div class="mul_imags" v-if="voucherImageList.length">
                                    <div v-for="(item, index) in voucherImageList" :key="index">
                                        <IsImgPdf :url="item" />
                                    </div>
                                </div>
                                <div class="mul_imags" v-else>无</div>
                            </div>
                        </div>
                        <div class="pop_xhibit_item img_box">
                            <div class="pop_label">其他资质：</div>
                            <div class="pop_values ">
                                <div class="mul_imags" v-if="otherImageList.length">
                                    <div v-for="(item, index) in otherImageList" :key="index">
                                        <IsImgPdf :url="item" />
                                    </div>
                                </div>
                                <div class="mul_imags" v-else>无</div>
                            </div>
                        </div>
                        <div class="pop_xhibit_item img_box">
                            <div class="pop_label">营业执照：</div>
                            <div class="pop_values ">
                                <IsImgPdf v-if="detailInfo.businessImage" :url="detailInfo.businessImage" />
                                <div v-else>无</div>
                            </div>
                        </div>

                    </div>
                </messageBox>
            </div>


            <!-- 合作信息 -->
            <div class="mechanism_area" id="product_detail_title--cooperate">
                <messageBox title="合作信息">
                    <div class="pop_xhibit">
                        <div class="pop_xhibit_item">
                            <div class="pop_label">贸易方式：</div>
                            <div class="pop_value text-warp">{{ detailInfo.tradeMode || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">招商部：</div>
                            <div class="pop_value text-warp">{{ detailInfo.recruiterDeptName || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">招商员：</div>
                            <div class="pop_value text-warp">{{ detailInfo.recruiterUserName || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">走仓：</div>
                            <div class="pop_value text-warp">{{ detailInfo.warehouse ? '是' : '否' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">历史最低售价：</div>
                            <div class="pop_value text-warp">{{ detailInfo.historyPrice || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">卖点：</div>
                            <div class="pop_value text-warp">{{ detailInfo.sellingPoints || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">备注：</div>
                            <div class="pop_value text-warp">{{ detailInfo.inAuditRemark || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">平台扣点：</div>
                            <div class="pop_value text-warp">{{ detailInfo.tax || 0 }}%</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">过期提醒时间：</div>
                            <div class="pop_value text-warp">{{ detailInfo.overdueTime || '' }}</div>
                        </div>
                    </div>
                </messageBox>
            </div>

            <!-- 直播补充信息 -->
            <div class="mechanism_area" id="product_detail_supplement">
                <messageBox title="直播补充信息">
                    <div class="pop_xhibit">
                        <div class="pop_xhibit_item">
                            <div class="pop_label">发货时间：</div>
                            <div class="pop_value text-warp">{{ detailInfo.deliveryTime || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">发货地区：</div>
                            <div class="pop_value text-warp">{{ detailInfo.placeDelivery || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">物流/快递：</div>
                            <div class="pop_value text-warp">{{ detailInfo.logistics || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">适用人群：</div>
                            <div class="pop_value text-warp">{{ detailInfo.eligibility || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">厂家可用库存：</div>
                            <div class="pop_value text-warp">{{ detailInfo.factoryStockNum || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">不发货地区：</div>
                            <div class="pop_value text-warp">{{ detailInfo.noSendArea || '' }}</div>
                        </div>

                    </div>
                </messageBox>
            </div>

            <!-- 供应商信息 -->
            <div class="mechanism_area" id="product_detail_title--supplier">
                <messageBox title="供应商信息">
                    <div class="pop_xhibit">
                        <div class="pop_xhibit_item">
                            <div class="pop_label">商家类型：</div>
                            <div class="pop_value text-warp">{{ supplierLists.supplierType || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">厂家地址：</div>
                            <div class="pop_value text-warp">{{ supplierLists.addr || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">联系人：</div>
                            <div class="pop_value text-warp">{{ supplierLists.contactName || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">联系电话：</div>
                            <div class="pop_value text-warp">{{ supplierLists.phone || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item">
                            <div class="pop_label">详细地址：</div>
                            <div class="pop_value text-warp">{{ supplierLists.address || '' }}</div>
                        </div>
                        <div class="pop_xhibit_item_tips">
                            <div class="tip_box fl-box-s-b"
                                :class="{ tip_box_y: supplierLists?.sellStatus == '1', tip_box_n: supplierLists?.sellStatus != '1' }">
                                供销合同 <div
                                    :class="{ tip_img_y: supplierLists?.sellStatus == '1', tip_img_n: supplierLists?.sellStatus != '1' }">
                                </div>
                            </div>
                            <div class="tip_box fl-box-s-b"
                                :class="{ tip_box_y: supplierLists?.discountStatus == '1', tip_box_n: supplierLists?.discountStatus != '1' }">
                                破价合同
                                <div
                                    :class="{ tip_img_y: supplierLists?.discountStatus == '1', tip_img_n: supplierLists?.discountStatus != '1' }">
                                </div>
                            </div>
                            <div class="tip_box fl-box-s-b"
                                :class="{ tip_box_y: supplierLists?.depositStatus == '1', tip_box_n: supplierLists?.depositStatus != '1' }">
                                保证金协议
                                <div
                                    :class="{ tip_img_y: supplierLists?.depositStatus == '1', tip_img_n: supplierLists?.depositStatus != '1' }">
                                </div>
                            </div>

                        </div>


                    </div>
                </messageBox>
            </div>

            <!-- 跳转 -->
            <div class="mechanism_area mb-60" id="product_detail_title--content">
                <messageBox title="查看记录" :downShow="false">
                    <div class="pop_xhibit">
                        <div class="pop_xhibit_item linkbox" @click="jumps('入库记录')">
                            <div class="pop_linklabel">
                                <div class="imgbox rk"></div>
                                <span>入库记录</span>
                            </div>
                            <div class="pop_rjt" />
                        </div>
                        <div class="pop_xhibit_item linkbox" @click="jumps('出库记录')">
                            <div class="pop_linklabel">
                                <div class="imgbox ck"></div>
                                <span>出库记录</span>
                            </div>
                            <div class="pop_rjt" />
                        </div>
                        <div class="pop_xhibit_item linkbox" @click="jumps('盘点记录')">
                            <div class="pop_linklabel">
                                <div class="imgbox pd"></div>
                                <span>盘点记录</span>
                            </div>
                            <div class="pop_rjt" />
                        </div>
                        <div class="pop_xhibit_item linkbox" @click="jumps('调拨记录')">
                            <div class="pop_linklabel">
                                <div class="imgbox db"></div>
                                <span>调拨记录</span>
                            </div>
                            <div class="pop_rjt" />
                        </div>
                        <!-- <div class="pop_xhibit_item linkbox"  @click="jumps('售卖记录')">
                            <div class="pop_linklabel"> 
                                <div class="imgbox sm"></div>
                                <span>售卖记录</span>
                            </div>
                            <div class="pop_rjt"/>
                        </div> -->

                    </div>
                </messageBox>
            </div>
            <!-- 下架展示 -->
            <!-- <div class="product_detail_title-content-info" v-if="detailInfo.shelvesStatus == 3">
                <div class="product_detail_title-content-info-name">下架原因：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo.stockInfo.offShelvesRemark }}
                </div>
            </div> -->

            <!-- 操作 -->
            <div class="buttonStatus">
                <div :class="detailInfo.shelvesStatus == 3 ? 'grounding' : 'groundings'"
                    v-if="detailInfo.shelvesStatus == 3 || detailInfo.shelvesStatus == 1" @click="grounding"
                    v-throttle:click>上架
                </div>
                <div class="grounding" v-if="detailInfo.shelvesStatus == 2" @click="offShelf" v-throttle:click>下架</div>
                <div class="utbound" @click="outbound" v-if="detailInfo.shelvesStatus && detailInfo.shelvesStatus !== 1"
                    v-throttle:click>出库</div>
            </div>

            <!-- 回到顶部按钮 -->
            <div v-if="showToTopButton" class="back-to-top-button" @click="scrollToTop">
                <van-image :src="toTop" class="" />
            </div>

            <van-overlay :show="overlayShow" @click="overlayShow = false" z-index="6001">
                <div class="wrapper" @click.stop>
                    <div class="wrapper_div">
                        <van-image :src="colseImg" @click="close"></van-image>
                        <div class="title">下架原因</div>
                        <van-form @submit="onSubmit">
                            <van-field maxlength="200" show-word-limit v-model="message" rows="6" label=""
                                type="textarea" placeholder="请输入下架原因，不超过200字符" :border="false"
                                :rules="[{ required: true, trigger: 'onBlur', message: '请输入下架原因' }]" />
                            <van-button class="button" :loading="loading" loading-text="执行中..." round block
                                type="primary" native-type="submit" v-throttle:click>
                                提交确认
                            </van-button>
                        </van-form>
                    </div>
                </div>
            </van-overlay>
        </div>
    </div>
</template>
<script setup lang="ts">
import { copyTextToClipboard } from '@/utils/index'
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getEnvValue } from "@/utils/index";
import { shelvesStatusNameByIdss } from '@/utils/statusNameById'
import { setUpDownShelves } from '@/api/productHome/index'
import {
    getSupplierAddProductsById,
} from "@/api/productList/index";
import { getInfo, hmSupplierList } from "@/api/supplierList/index";
import { showImagePreview, showSuccessToast, showFailToast } from "vant";
import IsImgPdf from '@/components/isImgPdf/index.vue'
import mechanismCardNew from '@/views/operation/product/components/mechanismCardNew.vue'
import messageBox from '@/views/productDetail/components/messageBox.vue'
const loading = ref(false)
const route = useRoute();
const router = useRouter();
const detailInfo = ref<any>({});
const realSrcList = ref<string[]>([]);
const stockImageList = ref<string[]>([]);
const colseImg = new URL("@/assets/approval/close.png", import.meta.url).href;
const overlayShow = ref(false)
const message = ref('')
const supplierLists = ref<any>({})
const voucherImageList = ref<string[]>([]);
const otherImageList = ref<string[]>([]);
const customsDeclarationImageList = ref<string[]>([]);
const customsInformationImageList = ref<string[]>([]);
const customsInspectionImageList = ref<string[]>([]);
const customsTestReportImgaeList = ref<string[]>([]);

const ticketSwiper = ref();
const rightPop = ref(false);

const errImg = new URL("@/assets/home/error.png", import.meta.url).href;
const setUp = new URL("@/assets/porduct/setUp.png", import.meta.url).href;
const edit = new URL("@/assets/porduct/edit.png", import.meta.url).href;
const complement = new URL("@/assets/porduct/complement.png", import.meta.url).href;
const complement69 = new URL("@/assets/porduct/complement69.png", import.meta.url).href;
const icon_dayin = new URL("@/assets/porduct/icon_dayin.png", import.meta.url).href;
const toTop = new URL("@/assets/porduct/icon_dingbu.png", import.meta.url).href;

const roleName = ref();

// 机制
const mechanismList = ref<any>({})
const hmMechanismsList1 = ref<any>({})
const hmMechanismsList2 = ref<any>({})

// 是否显示浮动导航栏
const showFloatingNav = ref(false);
const showToTopButton = ref(false);
const activeNavItem = ref("");
const scrollToElement = (elementId: string) => {
    const scrollDom: any = document.querySelector(".product_detail_scroll");
    const topOffsetHeight: any = (document.querySelector("#product_detail_top") as any).offsetHeight;
    const jizhiOffsetHeight: any = (document.querySelector("#product_detail_jizhi") as any).offsetHeight;

    const inventoryOffsetHeight: any = (document.querySelector("#product_detail_title--productPhotograph") as any).offsetHeight;

    const cooperateOffsetHeight: any = (document.querySelector("#product_detail_title--cooperate") as any).offsetHeight;


    //直播信息
    const supplementOffsetHeight: any = (document.querySelector("#product_detail_supplement") as any).offsetHeight;



    const firstscoll = topOffsetHeight + jizhiOffsetHeight
    const secondscoll = firstscoll + inventoryOffsetHeight
    const thirdscoll = secondscoll + cooperateOffsetHeight + supplementOffsetHeight

    switch (elementId) {
        case "product_detail_top":
            // moveDom = topDom;
            scrollDom.scrollTop = 0;
            break;

        case "product_detail_title--productPhotograph":
            scrollDom.scrollTop = firstscoll;
            break;
        case "product_detail_title--cooperate":
            scrollDom.scrollTop = secondscoll;
            break;
        case "product_detail_title--supplier":
            scrollDom.scrollTop = thirdscoll;
            break;
        default:
            return; // 如果没有匹配的 elementId，直接返回
    }

};
const scrollToTop = () => {
    const element = document.querySelector(".product_detail_scroll");
    let scrollTop = element ? element.scrollTop : 0;
    if (scrollTop > 0) {
        const timeTop = setInterval(() => {
            (element as Element).scrollTop = scrollTop -= 50;
            if (scrollTop <= 0) {
                clearInterval(timeTop);
            }
        }, 10);
    }
};
const checkScrollPosition = (event) => {

    // 滚动条距离顶部的距离
    const scrollTop = event?.target.scrollTop;
    // 元素内容的总高度
    const scrollHeight = event?.target.scrollHeight;
    // 元素在视口中的可见高度
    const clientHeight = event?.target.clientHeight;
    // 计算商品内容区域的位置
    const productTopOffset =
        document.getElementById("product_detail_top")?.offsetTop || 0;
    const contentBottomOffset = scrollHeight - clientHeight; // 内容区域底部位置

    // topOffsetHeight ==> 盒子高度   offsetTop ==> 盒子距离顶部距离
    const topOffsetHeight: any = (document.querySelector("#product_detail_top") as any).offsetHeight;
    // 资质
    const jizhiOffsetHeight: any = (document.querySelector("#product_detail_jizhi") as any).offsetHeight;
    //直播信息
    const supplementOffsetHeight: any = (document.querySelector("#product_detail_supplement") as any).offsetHeight;
    //商品资质
    const productPhotographOffsetTop: any = (document.querySelector("#product_detail_title--productPhotograph") as any).offsetHeight;
    //合作信息
    const cooperateOffsetHeight: any = (document.querySelector("#product_detail_title--cooperate") as any).offsetHeight;

    const firstscoll = topOffsetHeight + jizhiOffsetHeight - 90
    const secondscoll = firstscoll + productPhotographOffsetTop
    const thirdscoll = secondscoll + cooperateOffsetHeight + supplementOffsetHeight
    // 判断滚动位置，设置活动导航项
    if (scrollTop >= contentBottomOffset - 2 && scrollTop <= contentBottomOffset + 2) {
        activeNavItem.value = "product_detail_title--supplier";
        return
    }
    if (scrollTop >= 0 && scrollTop < firstscoll) {
        activeNavItem.value = "product_detail_top";
    } else if (scrollTop >= firstscoll && scrollTop < secondscoll) {
        activeNavItem.value = "product_detail_title--productPhotograph";
    } else if (scrollTop >= secondscoll && scrollTop < thirdscoll) {
        activeNavItem.value = "product_detail_title--cooperate";
    } else if (scrollTop >= thirdscoll && scrollTop <= contentBottomOffset + 2) {
        activeNavItem.value = "product_detail_title--supplier";
    }

    // 根据具体的滚动位置设定条件
    showFloatingNav.value = scrollTop > productTopOffset;
    showToTopButton.value = scrollTop > 100; // 显示回到顶部按钮条件，例如滚动超过100px
};

/** 图片放大 */
const enlargeImage = (data: any, index: number) => {
    showImagePreview({
        images: data,
        startPosition: index,
    });
};


/** 商品id */
const uniquekey = computed(() => {
    return route.params.id;
});


/** 上级路由状态 */
const shelvesStatus = computed(() => {
    return route.query.shelvesStatus;
});
/** 上级路由状态 */
const shelvesStatusName = computed(() => {
    return route.query.shelvesStatusName;
});


/** 多图片并发请求更改 */
const fetchImagesSequentially = async (real_src: any, list: any) => {
    for (const item of real_src) {
        if (item) {
            const url = getEnvValue("VITE_APP_PIC_URL") + item
            list.push(url);
        }
    }
};
/** 获取详情 */
const getDetail = async () => {
    const res = await getSupplierAddProductsById({ productId: uniquekey.value });
    detailInfo.value = res.data;
    console.log('detailInfo.value', detailInfo.value);

    if (res.data.mechanismList.length) {
        mechanismList.value = res.data.mechanismList[0]
        hmMechanismsList1.value = res.data.mechanismList[1]
        hmMechanismsList2.value = res.data.mechanismList[2]
    }
    if (res.data.productImage) {
        const real_src = res.data.productImage.split(",");
        fetchImagesSequentially(real_src, realSrcList.value);
    }

    if (res.data.stockImage) {
        const real_src = res.data.stockImage.split(",");
        fetchImagesSequentially(real_src, stockImageList.value);
    }
    if (res.data.supplierVo && res.data.supplierVo.businessImage) {
        detailInfo.value.businessImage = getEnvValue("VITE_APP_PIC_URL") + res.data.supplierVo.businessImage;
    }
    if (detailInfo.value.voucherImage) {
        const img1 = res.data.voucherImage.split(",");
        fetchImagesSequentially(img1, voucherImageList.value);
    }
    if (detailInfo.value.customsDeclarationImage) {
        const img2 = res.data.customsDeclarationImage.split(",");
        fetchImagesSequentially(img2, customsDeclarationImageList.value);
    }
    if (detailInfo.value.customsInformationImage) {
        const img3 = res.data.customsInformationImage.split(",");
        fetchImagesSequentially(img3, customsInformationImageList.value);
    }
    if (detailInfo.value.customsInspectionImage) {
        const img4 = res.data.customsInspectionImage.split(",");
        fetchImagesSequentially(img4, customsInspectionImageList.value);
    }
    if (detailInfo.value.customsTestReportImgae) {
        const img5 = res.data.customsTestReportImgae.split(",");
        fetchImagesSequentially(img5, customsTestReportImgaeList.value);
    }
    if (detailInfo.value.otherImage) {
        const img6 = res.data.otherImage.split(",");
        fetchImagesSequentially(img6, otherImageList.value);
    }

    const supplierList = await hmSupplierList({ id: detailInfo.value.supplierId })
    supplierLists.value = supplierList.rows[0]
};
getDetail();

const getUser = async () => {
    const res = await getInfo();
    roleName.value = res.data.user.roles[0].roleName;
};
getUser();

/** 复制 */
const copyClick = (title: string) => {
    copyTextToClipboard(title)
}



/** 补码跳转 */
const onClickComplement = (type: string) => {
    //  69码
    let styleCode = detailInfo.value.id;
    let sixcode = detailInfo.value.styleCode
    // 价格
    let price =
        detailInfo.value.cooperationMode == "分佣"
            ? detailInfo.value.price
            : detailInfo.value.costPrice;
    // 佣金
    let commission =
        detailInfo.value.cooperationMode == "分佣"
            ? detailInfo.value.commission + "%"
            : "";
    // 机制
    let liveStreamingMechanism = detailInfo.value.liveStreamingMechanism;
    // 商品名
    let styleName =
        detailInfo.value.styleName.length > 18
            ? detailInfo.value.styleName.substr(0, 18)
            : detailInfo.value.styleName;
    // 品牌名
    var brandName = detailInfo.value.brandName ? detailInfo.value.brandName : "";
    if (brandName.length > 18) {
        brandName = brandName.substr(0, 18);
    }
    // 上架时间
    let listingTime = detailInfo.value.shoppingTime ? "上架时间:" + detailInfo.value.shoppingTime : '上架时间:';

    // 规格/材质
    const gecs = detailInfo.value.specs ? detailInfo.value.specs : '';
    const specs = gecs.length > 190 ? gecs.substring(0, 190) : gecs
    let specsing =
        "规格/材质:" + specs;
    // 卖点
    let sellingPoint = "卖点:" + detailInfo.value.sellingPoints;
    //招商元姓名
    // let recruiter = '招商:' + detailInfo.value.recruiter
    // 跳转页面携带参数是补码还是69码
    let product = type == '补码' ? 'product' : 'product69'


    if (type == '补码' || type == '69码') {

        (window as any).uni.navigateTo({
            url: `/pages/print/index?barCode=${encodeURIComponent(
                styleCode
            )}&num1=${encodeURIComponent(price)}&num2=${encodeURIComponent(
                commission
            )}&num3=${encodeURIComponent(
                liveStreamingMechanism
            )}&sixcode=${encodeURIComponent(
                sixcode
            )}&name=${encodeURIComponent(styleName)}&brand=${encodeURIComponent(
                brandName
            )}&listingTime=${encodeURIComponent(
                listingTime
            )}&specsing=${encodeURIComponent(
                specsing
            )}&sellingPoint=${encodeURIComponent(sellingPoint)}&page=1&from=${product}`,
        });
    } else if (type == '打印') {
        const arr: Array<string> = []
        detailInfo.value.mechanismList.forEach((item, index) => {
            if (item.cooperationMode) {
                const obj = {
                    title: index == 0 ? '机制一:' : index == 1 ? '机制二:' : '机制三:',
                    number: item.cooperationMode == '分佣' ? `${item.price || 0.00}` : `${item.costPrice || 0.00}`,
                    commission: item.cooperationMode == '分佣' ? `${item.commission || 0.00}%` : '',
                    brokerage: item.cooperationMode == '分佣' ? `+${item.brokerage || 0.00}%` : '',
                    liveStreamingMechanism: index == 0 ? item.liveStreamingMechanism || '' : item.liveStreamingMechanism.substring(0, 8) || ''
                }
                arr.push(obj.title)
                arr.push(obj.number)
                arr.push(obj.commission)
                arr.push(obj.brokerage)
                arr.push(obj.liveStreamingMechanism)
            }
        })
        const params = {
            supplierName: `对接群名：${detailInfo.value.groupName || ''}`,
            styleCode: `商品编码：${detailInfo.value.id || ''}`,
            id: `69码：${detailInfo.value.styleCode || ''}`,
            inStockTime: `入库时间：${detailInfo.value.inStockTime || ''}`,
            stockCode: `库存编码：${detailInfo.value.stockCode.substring(0, 10) || ''}`,
            styleName: detailInfo.value.styleName.substring(0, 20) || '',
            recruiterUserName: detailInfo.value.recruiterUserName || '',
            discountPrice: detailInfo.value.discountPrice == '能' ? '能否破价：是' : '能否破价：否',
            historyPrice: `历史最低售价：${detailInfo.value.historyPrice || 0.00}`,
            specs: specsing,
            ingredient: detailInfo.value.ingredient && detailInfo.value.ingredient.length > 20 ? `/${detailInfo.value.ingredient.substring(0, 20) || ''}...` : `/${detailInfo.value.ingredient || ''}`,
            mechanismList: arr.join(','),
            inAuditRemark: detailInfo.value.inAuditRemark && detailInfo.value.inAuditRemark.length > 52 ? `备注：${detailInfo.value.inAuditRemark.substring(0, 52) || ''}...` : `备注：${detailInfo.value.inAuditRemark || ''}`,
            inStockNum: detailInfo.value.inStockNum ? `招商入库数：${detailInfo.value.inStockNum}` : `招商入库数：0`,
            supplierVoPhone: detailInfo.value.supplierVo?.phone || ''
        };
        (window as any).uni.navigateTo({
            url: `/pages/print/cdkey?styleName=${encodeURIComponent(params.styleName)
                }&styleCode=${encodeURIComponent(params.styleCode)
                }&id=${encodeURIComponent(params.id)
                }&recruiterUserName=${encodeURIComponent(params.recruiterUserName)
                }&stockCode=${encodeURIComponent(params.stockCode)
                }&historyPrice=${encodeURIComponent(params.historyPrice)
                }&supplierName=${encodeURIComponent(params.supplierName)
                }&discountPrice=${encodeURIComponent(params.discountPrice)
                }&inStockTime=${encodeURIComponent(params.inStockTime)
                }&specs=${encodeURIComponent(params.specs)
                }&ingredient=${encodeURIComponent(params.ingredient)
                }&inAuditRemark=${encodeURIComponent(params.inAuditRemark)
                }&mechanismList=${encodeURIComponent(params.mechanismList)
                }&inStockNum=${encodeURIComponent(params.inStockNum)
                }&supplierVoPhone=${encodeURIComponent(params.supplierVoPhone)
                }&page=1`,
        });
    }
};
/** 编辑 */
const onClickRight = () => {
    router.push(`/editProductDetail/${detailInfo.value.id}`);
};

/** 底部跳转 */
const jumps = (params: string) => {
    router.push({
        path: '/detailList',
        query: {
            title: params,
            id: detailInfo.value.id
        }
    })
}

/** 上架 */
const grounding = async () => {
    router.push({
        path: '/grounding',
        query: {
            id: detailInfo.value.id,
            shelvesStatus: shelvesStatus.value,
            shelvesStatusName: shelvesStatusName.value
        }
    })
}
/** 下架 */
const offShelf = async () => {
    overlayShow.value = true
}
/** 下架关闭 */
const close = () => {
    overlayShow.value = false
}
/** 下架建议提交 */
const onSubmit = async () => {
    loading.value = true
    try {
        await setUpDownShelves({
            stockProductsBoList: [
                {
                    productsId: uniquekey.value,
                    putType: 1, // 2上架 1下架
                    offShelfRemark: message.value,
                    locationCode: detailInfo.value.stockInfo?.locationName,
                    stockCode: detailInfo.value.stockCode
                }
            ]
        })
        showSuccessToast({ type: 'success', message: '下架成功' });
        loading.value = false
        overlayShow.value = false
        stockImageList.value = []
        realSrcList.value = []
        getDetail();
    } catch (error) {
        if (error == 'timeout') {
            showFailToast('下架失败');
        }
        loading.value = false
    }
    // router.back()
}
/** 出库 */
const outbound = async () => {
    if (detailInfo.value.stockInfo?.stockAvailable == 0) {
        showFailToast('该商品库存不足')
    } else {
        router.push({
            path: '/outboundType',
            query: {
                detailInfo: JSON.stringify(detailInfo.value),
                from: 'productHomeDetail'
            }
        })
    }
}
// /** 图片放大 */
// const enlargeImages = (img: string) => {
//     if (img) {
//         showImagePreview({
//             images: [img],
//         });
//     }
// };

/** 返回区分不同地址 */
const handleLeft = () => {
    router.back();
};
</script>
<style lang="less" scoped>
.button {
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    margin-top: 10px;

    .cancel {
        width: 162px;
        height: 44px;
        border-radius: 23px;
        border: 1px solid #1a1b1c;
        background-color: #fff;
        color: #000;
        font-size: 14px;
        color: #1a1b1c;
        line-height: 44px;
        text-align: center;
    }

    .save {
        width: 162px;
        height: 44px;
        background: #0094ff;
        border-radius: 23px;
        color: #ffffff;
        font-size: 14px;
        line-height: 44px;
        text-align: center;
    }
}

.product_list_serch {
    padding-top: 90px;
    width: 100%;
    height: 55px;
    position: relative;

    .product_list_serch_button {
        width: 60px;
        height: 32px;
        position: absolute;
        right: 11px;
        top: 100px;
    }
}

:deep(.van-search__field) {
    background-color: #fff;
    border-radius: 20px;
    padding-left: 15px;
    padding-right: 60px;
}

.launch_div {
    padding: 0px 10px 0 10px;
    box-sizing: border-box;
    padding-top: 90px;
}

.launch_title {
    font-size: 14px;
    color: #1a1b1c;
}

.pop_div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;

    .pop_div_out {
        width: 25%;
        min-width: 78px;
        display: flex;
        justify-content: center;
        height: 30px;
        border-radius: 15px;
        line-height: 30px;
        font-size: 14px;
        margin-bottom: 15px;
    }

    .pop_div_item {
        width: 78px;
        display: flex;
        justify-content: center;
        height: 30px;
        border-radius: 15px;
        line-height: 30px;
        font-size: 12px;
    }
}

.product_detail {
    width: 100%;
    height: calc(100vh);
    background-color: #f6faff;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    align-content: flex-start;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;
        width: 100%;
        position: fixed;
        z-index: 6003;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .product_detail_scroll {
        overflow-y: scroll;
        height: 100%;
        width: 100%;
    }

    .right_pop {
        position: absolute;
        top: 90px;
        right: 0px;
        width: 77px;
        height: 88px;
        background: #f6faff;
        display: flex;
        flex-wrap: wrap;
        z-index: 1000;

        .right_pop_div {
            display: flex;
            font-size: 14px;
            color: #0094ff;
            align-items: center;
            width: 100%;
            justify-content: center;
        }
    }

    .red-text {
        color: #1a1b1c;
        /* 激活状态下字体变为红色 */
    }

    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;

        .wrapper_div {
            width: 315px;
            background-color: #fff;
            border-radius: 5px;
            position: relative;

            :deep(.van-field__control) {
                background: #F6FAFF !important;
            }

            ::placeholder {
                font-size: 14px;
                color: #B8BECA;
            }

            .title {
                font-weight: 500;
                font-size: 16px;
                color: #1A1B1C;
                width: 100%;
                text-align: center;
                margin: 30px 0 20px 0;
            }

            .van-image {
                width: 10px;
                height: 10px;
                position: absolute;
                right: 18px;
                top: 18px;
            }

            :deep(.van-form) {
                min-height: 265px;
            }

            .button {
                color: #FFFFFF;
                font-size: 14px;
                width: 285px;
                height: 44px;
                background: #0094FF;
                border-radius: 23px;
                margin: auto;
                display: flex;
                justify-content: center;
                margin-top: 10px;
            }
        }
    }

    .floating-nav {
        position: fixed;
        top: 90px;
        display: flex;
        align-items: center;
        background-color: white;
        z-index: 999;
        width: 100%;
        height: 34px;
        align-content: center;
        color: #b8beca;
        box-shadow: 0px 4px 8px 0px rgba(189, 195, 204, 0.5);
        border: 1px solid #F3F3FF;

        /* 其他样式，如宽度、边距、填充等 */
        ul {
            list-style: none;
            padding: 0 10px;
            box-sizing: border-box;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 100%;

            li {
                width: 0px;
                flex: 1;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #8492AD;
                line-height: 14px;
                text-align: center;
                font-style: normal;
                text-transform: lowercase;
            }

            .red-text {
                color: #0094FF;
                /* 激活状态下字体变为红色 */
            }
        }
    }

    .menu_cion {
        width: 14px;
        height: 14px;
        position: absolute;
        right: 15px;
    }

    .menu_cions {
        width: 14px;
        height: 14px;
        margin-right: 3px;
    }

    :deep(.van-nav-bar) {
        background-color: #1466ff;
        height: 46px !important;
        width: 100%;
        position: fixed !important;
    }

    :deep(.van-nav-bar__title) {
        color: #000;
    }

    :deep(.van-nav-bar__text) {
        color: #000;
    }

    :deep(.van-icon) {
        color: #000;
    }

    .product_detail_top {
        width: 100%;
        height: 50%;
        background-color: #fff;
        box-sizing: border-box;
        margin-top: 90px;

        .product_detail_top_img {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: relative;

            img {
                width: 375px;
                height: 320px;
            }

            :deep(.van-swipe) {
                width: 375px;
                height: 320px;

                .van-swipe-item {
                    width: 375px;
                    height: 320px;
                }
            }

            :deep(.van-image) {
                width: 375px;
                height: 320px;
            }
        }

        .product_detail_top_details {
            width: 100%;
            box-sizing: border-box;
            padding: 15px;

            .product_stylename {
                font-weight: 600;
                font-size: 18px;
                color: #1A1B1C;
                display: flex;
                align-items: center;

                .styleName {
                    width: 0;
                    flex: 1;
                    margin-left: 10px;
                }

                .product_mechanism {
                    width: 56px;
                    height: 22px;
                    background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
                    border-radius: 5px;
                    font-weight: 500;
                    font-size: 12px;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 22px;
                }
            }

            .product_box {
                margin-top: 10px;
                position: relative;

                .product_fl_box {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .box_l {
                        display: flex;
                        align-items: center;
                        height: 30px;
                        background: #EBF4FF;
                        border-radius: 5px;
                        margin-right: 7px;

                        .l_title {
                            width: 85px;
                            height: 30px;
                            background: url("@/assets/newui/details/icon_kucunbianma@2x.png");
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                            font-weight: 500;
                            font-size: 14px;
                            color: #3F68DB;
                            line-height: 14px;
                            text-align: center;
                            line-height: 30px;

                            span {
                                display: inline-block;
                                transform: translateX(-4px);
                            }
                        }

                        .l_code {
                            font-weight: 500;
                            font-size: 14px;
                            color: #3F68DB;
                            line-height: 14px;
                            margin-left: 10px;
                            max-width: 70px;
                        }

                        .l_copy {
                            width: 15px;
                            height: 15px;
                            margin: 0 10px;
                            background: url("@/assets/newui/details/icon_kucunbianmacopy@2x.png");
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                        }
                    }

                    .box_r {
                        width: 0px;
                        flex: 1;
                        height: 30px;
                        background: #EBF4FF;
                        border-radius: 5px 0px 5px 5px;
                        text-align: center;
                        position: relative;
                        font-weight: 500;
                        font-size: 14px;
                        color: #3F68DB;
                        line-height: 30px;

                        .icon_69 {
                            position: absolute;
                            width: 49px;
                            height: 16px;
                            background: url("@/assets/newui/details/icon_69ma@2x.png");
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                            right: 0;
                            top: -16px;
                        }
                    }
                }
            }

            .product_ppbox {
                margin-top: 10px;
                display: flex;
                flex-wrap: wrap;
                gap: 10px;

                .pp_item {
                    height: 30px;
                    background: #F7F7F7;
                    border-radius: 5px;
                    font-weight: 500;
                    font-size: 14px;
                    color: #464E5D;
                    line-height: 30px;
                    padding: 0 10px;
                }
            }

            .product_gysbox {
                display: flex;
                align-items: center;
                margin-top: 10px;

                .gys_l {
                    height: 30px;
                    width: 0;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    padding: 0 10px;
                    background: #FFE9E1;
                    border-radius: 5px;
                    font-weight: 500;
                    font-size: 14px;
                    color: #FF5A1A;
                    line-height: 14px;

                    .gys_img {
                        width: 12px;
                        height: 14px;
                        background: url("@/assets/newui/details/gys.svg");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        margin-right: 5px;
                    }
                }

                .gys_c {
                    width: 66px;
                    height: 30px;
                    border-radius: 5px;
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 30px;
                    text-align: center;
                    margin-left: 10px;
                    background: #EBF4FF;
                    color: #0094FF;
                }
            }

            .product_ztbox {
                width: 345px;
                height: 65px;
                background: #F7F7F7;
                border-radius: 5px;
                margin-top: 10px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .line {
                    width: 1px;
                    height: 25px;
                    background-color: #ECECF2;
                }

                .product_users_item {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #8492AD;
                    line-height: 14px;
                    width: 0;
                    flex: 1;
                    text-align: center;

                    .product_users_text {
                        font-weight: 500;
                        font-size: 14px;
                        color: #1A1B1C;
                        line-height: 14px;
                        margin-top: 11px;
                    }
                }
            }

            .product_id {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #825C2A;
                line-height: 12px;
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .produc_left {
                    width: 210px;
                    height: 20px;
                    background: linear-gradient(180deg, #FCF2DB 0%, #FCE7C9 100%);
                    border-radius: 5px;
                    padding: 0 5px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    box-sizing: border-box;

                    .copy {
                        width: 12px;
                        height: 12px;
                        background: url("@/assets/newui/details/icon_zongsefuzhi@2x.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }
                }

                .coreName {
                    width: 0px;
                    flex: 1;
                    margin-left: 5px;
                    height: 20px;
                    background: linear-gradient(180deg, #FCF2DB 0%, #FCE7C9 100%);
                    border-radius: 5px;
                    align-items: center;
                    display: flex;

                    .goods_r_l {
                        width: 34px;
                        height: 20px;
                        border-radius: 5px;
                        border: 1px solid;
                        text-align: center;
                        line-height: 20px;
                    }

                    .goods_r_r {
                        width: 0;
                        flex: 1;
                        text-align: center;
                    }
                }

            }

            .product_ggbox {
                display: flex;
                margin-top: 10px;
                font-weight: 400;
                font-size: 14px;
                color: #464E5D;
                line-height: 20px;
                white-space: wrap;
                word-break: break-all;
                text-align: justify;

                .ggimg {
                    width: 14px;
                    height: 14px;
                    background: url("@/assets/newui/details/icon_guige.svg");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    margin-right: 10px;
                    transform: translateY(3px);
                    flex-shrink: 0;

                }

                .qunimg {
                    width: 14px;
                    height: 14px;
                    background: url("@/assets/newui/details/icon_duijiequnming.svg");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    margin-right: 10px;
                    transform: translateY(3px);
                    flex-shrink: 0;

                }
            }



            .brand_right {
                margin-left: 20px;
            }
        }


    }

    &_title {
        padding: 10px 15px 0px 15px;
        width: 100%;
        font-weight: 500;
        font-size: 16px;
        color: #1a1b1c;
    }

    &_bottom {
        width: 100%;
        border-radius: 3px;
        // height: calc(58vh - 85px);
        background-color: #fff;
        padding: 1px 15px 60px 12px;
        box-sizing: border-box;

        .supplier_detail_content_div {
            min-height: 45px;
            // height: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;

            .label {
                width: 115px;
            }

            .value {
                width: calc(100% - 115px);
                color: #b8beca;
                // text-align: right;
                display: flex;
                justify-content: flex-end;

                .van-image {
                    width: 30px;
                    height: 30px;
                }
            }
        }

        .supplier_detail_content_divorder {
            border-bottom: 1px solid #dddddd;
        }

        .tilte {
            display: inline-block;
            margin: 8px 0;
            font-weight: 400;
            font-size: 14px;
            color: #1a1b1c;
            padding-bottom: 5px;
        }

        .product_image {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            width: 100%;
            margin-left: -10px;
            // margin-left: 10%;
            flex-wrap: wrap;

            .product_image_div {
                // margin-right: 5px;
            }
        }

        .vouche_image {
            width: 80%;
            margin-left: 10%;
        }
    }

    .buttonStatus {
        width: 100%;
        height: 84px;
        position: fixed;
        bottom: 0px;
        display: flex;
        line-height: 40px;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        box-sizing: border-box;
        padding: 0 15px;
        gap: 20px;
        box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);

        .grounding {
            width: 0;
            flex: 1;
            height: 44px;
            border-radius: 5px;
            border: 1px solid #0094FF;
            text-align: center;
            color: #009EFF;
            background-color: #fff;
        }

        .groundings {
            width: 0;
            flex: 1;
            height: 44px;
            background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
            border-radius: 5px;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 44px;
            text-align: center;
        }

        .utbound {
            width: 0;
            flex: 1;
            height: 44px;
            background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
            border-radius: 5px;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 44px;
            text-align: center;
        }
    }

    :deep(.product_detail_top) {
        width: 100% !important;
        // width: 100%;
        // border: solid 1px black;
        // min-height: 570px;
        height: auto;
    }

    .product_detail_top_img {
        width: 375px;
        height: 320px;
    }

    .van-swipe-item {
        width: 375px !important;
        height: 320px !important;

        .van-image {
            width: 375px;
            height: 320px;
        }
    }

    .van-swipe {
        width: 375px;
        height: 320px;
    }






    .merchant-style-btn1 {
        margin-left: 10px;
        width: 66px;
        height: 26px;
        background: #ebf4ff;
        border-radius: 13px;
        color: #0094ff;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product_detail_title--content {
        // display: flex;
        // border: solid 1px black;
        // width: 100%;
        background: #fff;
        padding: 15px;

        .mechanism_title {
            font-weight: 500;
            font-size: 14px;
            color: #0094FF;
            margin-top: 20px;
        }
    }

    .product_detail_title--contents {
        background: #fff;
        padding: 15px 15px 60px 15px;
        box-sizing: border-box;

        .mechanism_title {
            font-weight: 500;
            font-size: 14px;
            color: #0094FF;
            margin-top: 20px;
        }
    }

    .productPhotograph_div {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;

        .productPhotograph_divs {
            margin-top: 10px;
            height: 100%;
            width: max-content;
        }

        .image_div {
            width: 100px;
            height: 100px;
            margin-right: 10px;
            display: inline-block;
        }
    }

    .product_detail_title-content-size {
        font-weight: 500;
        font-size: 16px;
        color: #1a1b1c;
        display: flex;
        align-items: center;

        .product_detail_title_dis {
            display: flex;
            align-items: center;

            .name {
                font-size: 12px;
                margin: 5px;
            }
        }

    }



    .product_detail_title-content-info {
        margin-top: 20px;
        display: flex;
    }

    .product_detail_title-content-info-name {
        font-weight: 400;
        font-size: 14px;
        color: #1a1b1c;
        line-height: 14px;
        width: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .imgs {
            width: 20px;
            height: 20px;
        }
    }

    .product_detail_title-content-info-content {
        font-weight: 400;
        font-size: 14px;
        color: #b8beca;
        line-height: 14px;
        margin-left: auto;
        width: calc(100% - 100px);
        display: flex;
        justify-content: flex-end;
        word-break: break-all;

        .imgs {
            width: 14px;
            height: 14px;
            margin-left: 10px;
        }

        .jumps {
            color: #B8BECA;
        }
    }

    .flexs {
        width: 200px !important;
        justify-content: space-between !important;
    }

    .product_image_div {
        // border: solid 1px black;
        // margin-left: 10px;
    }

    .vouche_image {
        // border: solid 1px black;
        width: 100%;
        margin-left: -10px;
    }

    .vouche_image-style {
        width: 90px;
        height: 90px;
        margin-left: 10px;
        // border: solid 1px black;
    }

    :deep(.van-nav-bar__text) {
        color: #0094ff !important;
    }

    .back-to-top-button {
        position: fixed;
        bottom: 60px;
        right: 60px;
        border: none;
        cursor: pointer;
        width: 40px;
        height: 40px;

        :deep(.van-image) {
            width: 40px;
            height: 40px;
        }
    }
}

.tilte {
    display: inline-block;
    margin: 8px 0;
    font-weight: 400;
    font-size: 14px;
    color: #b8beca;
    padding-bottom: 5px;
}

.product_image {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    width: 100%;
    // margin-left: 10%;
    flex-wrap: wrap;

    .product_image_div {
        // margin-right: 5px;
    }
}

// 多机制TOP图片
.mechanism_mall {
    position: absolute;
    right: 0;
    top: 35px;
    width: 70px;
    height: 41px;
    background: url("@/assets/newui/details/icon_duojizhi@2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.stock_box {
    position: absolute;
    left: 0;
    bottom: 0;
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 14px;
    background: #000000aa;
    height: 30px;
    padding: 0 10px;
    display: flex;
    align-items: center;

    .line {
        width: 1px;
        height: 14px;
        background-color: #fff;
        margin: 0 10px;
    }
}

//轮播计数
.hmshop-custom-indicator {
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 30px;
    background: #000000aa;
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 30px;
    font-style: normal;
    padding: 0 10px;
}

.text-el {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.style_y {
    background-color: #E7FDEE !important;
    color: #19D11B !important;
}

.style_n {
    background-color: #FDE7E7 !important;
    color: #FC2540 !important;
}

.mechanism_area {
    padding: 0 15px;
}

.pop_xhibit_item_tips {
    padding: 10px 0;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;

    &::after {
        display: block;
        content: '';
        width: 0;
        flex: 1;
    }

    .tip_box {
        height: 22px;
        border-radius: 5px;
        padding: 0 10px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 12px;
        line-height: 12px;
        font-style: normal;


        .tip_img_y {
            width: 12px;
            height: 12px;
            background: url("@/assets/newui/productList/icon_lvseduihao@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-left: 5px;
        }

        .tip_img_n {
            width: 12px;
            height: 12px;
            background: url("@/assets/newui/productList/icon_hongsewenhao@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-left: 5px;
        }
    }

    .tip_box_y {
        background: #E7FDEE;
        color: #19D11B;
    }

    .tip_box_n {
        background: #FDE7E7;
        color: #FC2540;
    }
}

.pop_xhibit_item {
    padding: 10px 0;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    display: flex;


    .pop_label {
        width: 100%;
        flex: 3;
        color: #464E5D;
    }


    .pop_value {
        width: 0;
        flex: 5;
        color: #1A1B1C;
    }

    .pop_value_contract {
        display: flex;
        flex-wrap: wrap;

        div {
            margin-right: 9px;
            margin-bottom: 5px;
        }
    }

    .pop_values {
        padding-top: 10px;

        .mul_imags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;


        }

        .van-image {
            width: 90px;
            height: 90px;
        }
    }
}

.linkbox {
    justify-content: space-between;
    align-items: center;

    .pop_linklabel {
        font-weight: 500;
        font-size: 16px;
        color: #1A1B1C;
        line-height: 16px;
        text-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;

        .imgbox {
            width: 36px;
            height: 36px;
            margin-right: 10px;
        }

        .rk {

            background: url("@/assets/newui/details/icon_ruku@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .ck {

            background: url("@/assets/newui/details/icon_chuku@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .pd {

            background: url("@/assets/newui/details/icon_pandian@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .db {

            background: url("@/assets/newui/details/icon_diaobo@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .sm {

            background: url("@/assets/newui/details/icon_shoumai@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    }

    .pop_rjt {
        width: 7px;
        height: 12px;
        background: url("@/assets/newui/details/icon_heisejiantou.svg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
}

.img_box {
    display: block;
}

.fl-box-s-b {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-warp {
    word-break: break-all;
    text-align: justify;
}

.mb-60 {
    margin-bottom: 100px;
}
</style>
